/**
 * 我的钱包
 */
<template>
  <div>
    <!-- 钱包 -->
    <div class="wallet_box" > 
      <div class="common_title">
        <span>汇总</span>
      </div>
      <el-row :gutter="20"   v-if="info">
        <el-col :span="24">
          <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">中心钱包余额</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    <span>$</span>
                    {{ b(info.userBalances) }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card1.png" />
              </el-col>
            </el-card>
          </el-col>
        
          <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">共享卡总钱包总额 
                    <el-tooltip class="item" effect="dark" content="Gwhale卡钱包总额+星汇卡钱包总额" placement="top-start">
                      <i class="el-icon-warning"></i>
                    </el-tooltip>
                  </span>
                  <div class="font18 text-black font-w6 margin-t10">
                    <span>$</span> {{   b(Number(info.userMatrixBalances||0)+Number(info.userBudgetBalances||0))}}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card2.png" />
              </el-col>
            </el-card>
          </el-col> 
          <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">Gwhale卡余额 </span>
                  <div class="font18 text-black font-w6 margin-t10">
                    <span>$</span> 
                    {{ b(Number(info.cardBalance||0)+Number(info.budgetBalance||0)) }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card3.png" />
              </el-col>
            </el-card>
          </el-col>
          <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">汇总卡Bin 
                    <el-tooltip class="item" effect="dark" content="Gwhale卡卡Bin+星汇卡卡Bin" placement="top-start">
                      <i class="el-icon-warning"></i>
                    </el-tooltip> 
                  </span>
                  <div class="font18 text-black font-w6 margin-t10">
                    {{ info.count + info.countCardWf }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card4.png" />
              </el-col>
            </el-card>
          </el-col>
          <!-- <el-col :span="4">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">有效会员</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    {{ info.userCount }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card2.png" />
              </el-col>
            </el-card>
          </el-col> -->
        </el-col> 
      </el-row>
      <el-row :gutter="20"   v-if="info" style="margin:30px 0 0 0"> 
          <el-col :span="24"> 
              <el-row
                type="flex"
                justify="space-between"
                align="middle"
                class="pro_box"
                v-if="info"
              > 
                <el-col :span="8">
                  <div class="card_wallet2" style="width: 100%;">
                    <el-progress
                      type="circle"
                      :percentage="
                        info.transactionCount == 0&&info.transactionCountWf
                          ? 0
                          : Math.round(
                              ((info.refuseCount +info.refuseCountWf) / (info.transactionAmount + info.transactionCountWf)) * 100
                            )
                      "
                      color="#439A86"
                      define-back-color="#CFCACA"
                      :width="60"
                    ></el-progress>
                    <div class="aline-c margin-l20" style="width: 200px;">
                      <div class="font15 font-w6 text-black">拒付率</div>
                      <div class="pro_t margin-t5">
                        <span class="text-gree">{{ info.refuseCount + info.refuseCountWf }}</span>
                        /
                        {{ info.transactionCount + info.transactionCountWf - info.voidCount }}
                      </div>
                    </div>
                  </div> 
                </el-col>  
                <el-col :span="8">
                  <div class="card_wallet2"  style="width: 100%;  margin: 0 20px;" > 
                    <el-progress
                      type="circle"
                      :percentage="
                        info.transactionCount == 0 &&info.transactionCountWf == 0 
                          ? 0
                          : Math.round(
                              ((info.refundCount+info.refundCountWf) / (info.transactionAmount + info.transactionCountWf - info.voidCount)) * 100
                            )
                      "
                      color="#439A86"
                      define-back-color="#CFCACA"
                      :width="60"
                    ></el-progress>
                    <div class="aline-c margin-l20">
                      <div class="font15 font-w6 text-black">退款率</div>
                      <div class="pro_t margin-t5">
                        <span class="text-gree">{{ info.refundCount + info.refundCountWf }}</span>
                        /
                        {{ info.transactionCount +info.transactionCountWf - info.voidCount }}
                      </div>
                    </div>
                  </div> 
                </el-col> 
              
                <el-col :span="8">
                  <div class="card_wallet2" style="width: 100%; "> 
                    <el-progress
                      type="circle"
                      :percentage="
                        info.transactionAmount == 0 &&info.transactionAmountWf == 0 
                          ? 0
                          : Math.round(
                              ((info.refundAmount+info.refundAmountWf) / (info.transactionAmount + info.transactionAmountWf - info.voidAmount)) * 100
                            )
                      "
                      color="#439A86"
                      define-back-color="#CFCACA"
                      :width="60"
                    ></el-progress>
                    <div class="aline-c margin-l20">
                      <div class="font15 font-w6 text-black">退款金额率</div>
                      <div class="pro_t margin-t5">
                        <span class="text-gree">{{ info.refundAmount +info.refundAmountWf }}</span>
                        /
                        {{ (info.transactionAmount + info.transactionAmountWf - info.voidAmount - info.voidAmountWf).toFixed(0) }}
                      </div>
                    </div>
                  </div>
                </el-col> 
              </el-row> 
            </el-col>  
      </el-row>
    </div> 
    <div class="wallet_box" > 
      <div class="common_title">
        <span>Gwhale卡</span>
      </div>
      <el-row :gutter="20"   v-if="info">
        <el-col :span="24">
          <el-col :span="5">
            <!-- <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">中心钱包余额</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    <span>$</span>
                    {{ b(info.userBalances) }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card1.png" />
              </el-col>
            </el-card> -->
          </el-col>
        
          <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">Gwhale卡钱包总额</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    <span>$</span>{{ info.userMatrixBalances }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card2.png" />
              </el-col>
            </el-card>
          </el-col> 
          <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">Gwhale卡余额 </span>
                  <div class="font18 text-black font-w6 margin-t10">
                    <span>$</span>
                    {{ b(info.cardBalance) }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card3.png" />
              </el-col>
            </el-card>
          </el-col>
          <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">Gwhale卡卡Bin</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    {{ info.count }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card4.png" />
              </el-col>
            </el-card>
          </el-col>
          <!-- <el-col :span="4">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">有效会员</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    {{ info.userCount }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card2.png" />
              </el-col>
            </el-card>
          </el-col> -->
        </el-col> 
      </el-row>
      <el-row :gutter="20"   v-if="info" style="margin:30px 0 0 0"> 
          <el-col :span="24"> 
              <el-row
                type="flex"
                justify="space-between"
                align="middle"
                class="pro_box"
                v-if="info"
              > 
                <el-col :span="8">
                  <div class="card_wallet2" style="width: 100%;">
                    <el-progress
                      type="circle"
                      :percentage="
                        info.transactionCount == 0
                          ? 0
                          : Math.round(
                              (info.refuseCount / (info.transactionAmount - info.voidCount)) * 100
                            )
                      "
                      color="#439A86"
                      define-back-color="#CFCACA"
                      :width="60"
                    ></el-progress>
                    <div class="aline-c margin-l20" style="width: 200px;">
                      <div class="font15 font-w6 text-black">拒付率</div>
                      <div class="pro_t margin-t5">
                        <span class="text-gree">{{ info.refuseCount }}</span>
                        /
                        {{ info.transactionCount - info.voidCount }}
                      </div>
                    </div>
                  </div> 
                </el-col>  
                <el-col :span="8">
                  <div class="card_wallet2"  style="width: 100%;  margin: 0 20px;" > 
                    <el-progress
                      type="circle"
                      :percentage="
                        info.transactionCount == 0
                          ? 0
                          : Math.round(
                              (info.refundCount / (info.transactionAmount - info.voidCount)) * 100
                            )
                      "
                      color="#439A86"
                      define-back-color="#CFCACA"
                      :width="60"
                    ></el-progress>
                    <div class="aline-c margin-l20">
                      <div class="font15 font-w6 text-black">退款率</div>
                      <div class="pro_t margin-t5">
                        <span class="text-gree">{{ info.refundCount }}</span>
                        /
                        {{ info.transactionCount - info.voidCount }}
                      </div>
                    </div>
                  </div> 
                </el-col> 
              
                <el-col :span="8">
                  <div class="card_wallet2" style="width: 100%; "> 
                    <el-progress
                      type="circle"
                      :percentage="
                        info.transactionAmount == 0
                          ? 0
                          : Math.round(
                              (info.refundAmount / (info.transactionAmount - info.voidAmount)) * 100
                            )
                      "
                      color="#439A86"
                      define-back-color="#CFCACA"
                      :width="60"
                    ></el-progress>
                    <div class="aline-c margin-l20">
                      <div class="font15 font-w6 text-black">退款金额率</div>
                      <div class="pro_t margin-t5">
                        <span class="text-gree">{{ info.refundAmount }}</span>
                        /
                        {{  (info.transactionAmount - info.voidAmount).toFixed(0) }}
                      </div>
                    </div>
                  </div>
                </el-col> 
              </el-row> 
            </el-col>  
      </el-row>
    </div> 

    <div class="wallet_box" > 
      <div class="common_title">
        <span>星汇卡</span>
      </div>
      <el-row :gutter="20"   v-if="info">
        <el-col :span="24">
          <!-- <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">中心钱包余额</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    <span>$</span>
                    {{ b(info.userBalances) }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card1.png" />
              </el-col>
            </el-card>
          </el-col>
         -->
          <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">星汇卡钱包总额</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    <span>$</span>{{ info.userBudgetBalances  || 0 }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card2.png" />
              </el-col>
            </el-card>
          </el-col> 
          <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">星汇卡卡Bin</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    {{ info.countCardWf }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card4.png" />
              </el-col>
            </el-card>
          </el-col>
          <!-- <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">Gwhale卡余额 </span>
                  <div class="font18 text-black font-w6 margin-t10">
                    <span>$</span>
                    {{ b(info.cardBalance) }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card3.png" />
              </el-col>
            </el-card>
          </el-col>
          <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">Gwhale卡卡Bin</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    {{ info.count }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card4.png" />
              </el-col>
            </el-card>
          </el-col> -->
          <!-- <el-col :span="4">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">有效会员</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    {{ info.userCount }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card2.png" />
              </el-col>
            </el-card>
          </el-col> -->
        </el-col> 
      </el-row>
      <el-row :gutter="20"   v-if="info" style="margin:30px 0 0 0"> 
          <el-col :span="24"> 
              <el-row
                type="flex"
                justify="space-between"
                align="middle"
                class="pro_box"
                v-if="info"
              > 
                <el-col :span="8">
                  <div class="card_wallet2" style="width: 100%;"> 
           
                    <el-progress
                      type="circle"
                      :percentage="
                        info.transactionCountWf == 0
                          ? 0
                          : Math.round(
                              (info.refuseCountWf / (info.transactionCountWf)) * 100
                            )
                      "
                      color="#439A86"
                      define-back-color="#CFCACA"
                      :width="60"
                    ></el-progress>
                    <div class="aline-c margin-l20" style="width: 200px;">
                      <div class="font15 font-w6 text-black">拒付率</div>
                      <div class="pro_t margin-t5">
                        <span class="text-gree">{{ info.refuseCountWf }}</span>
                        /
                        {{ info.transactionCountWf}}
                      </div>
                    </div>
                  </div> 
                </el-col>  
                <el-col :span="8">
                  <div class="card_wallet2"  style="width: 100%;  margin: 0 20px;" > 
                    <el-progress
                      type="circle"
                      :percentage="
                        info.transactionCountWf == 0
                          ? 0
                          : Math.round(
                              (info.refundCountWf / (info.transactionCountWf)) * 100
                            )
                      "
                      color="#439A86"
                      define-back-color="#CFCACA"
                      :width="60"
                    ></el-progress>
                    <div class="aline-c margin-l20">
                      <div class="font15 font-w6 text-black">退款率</div>
                      <div class="pro_t margin-t5">
                        <span class="text-gree">{{ info.refundCountWf }}</span>
                        /
                        {{ info.transactionCountWf  }}
                      </div>
                    </div>
                  </div> 
                </el-col> 
              
                <el-col :span="8">
                  <div class="card_wallet2" style="width: 100%; "> 
                    <el-progress
                      type="circle"
                      :percentage="
                        info.transactionAmountWf == 0
                          ? 0
                          : Math.round(
                              (info.refundAmountWf / (info.transactionAmountWf)) * 100
                            )
                      "
                      color="#439A86"
                      define-back-color="#CFCACA"
                      :width="60"
                    ></el-progress>
                    <div class="aline-c margin-l20">
                      <div class="font15 font-w6 text-black">退款金额率</div>
                      <div class="pro_t margin-t5">
                        <span class="text-gree">{{ info.refundAmountWf }}</span>
                        /
                        {{ (info.transactionAmountWf).toFixed(0)}}
                      </div>
                    </div>
                  </div>
                </el-col> 
              </el-row> 
            </el-col>  
      </el-row>
    </div>  
  
 
 
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  numberNo,
  spStr,
  timestampSubTime
} from "../../utils/util";
import {
  req,
  service,
  encrypt,
  decrypt,
  reqtoken,
  format,
  getUrl,
} from "../../api/axiosFun"; 
export default {
  data() {
    return {
      info: null,
      b: format,
      numberNo: numberNo, 
 
    };
  },
  // 注册组件
  components: {
    
  },
  created() {
    this.getInfo(); 
  },
  methods: { 
    getInfo() {
      service
        .get("/api/admin/getData", {})
        .then((res) => {
          if (res.code == 0) {
            this.info = res.data;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    }, 
   
  },
};
</script>

<style scoped>
.wallet_box { 
  border-radius: 8px;
  background: #fff;
  padding:0  10px 20px 10px;
  margin-bottom: 20px;
}
.card_wallet {
  padding: 10px 0 20px;
  height: 80px;
  background-size: 100% 100%;
  border-radius: 20px;
  color: #a0aec0;
}

.pro_box .el-col {
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/ .el-progress .el-progress-circle {
  width: 50px !important;
  height: 50px !important;
}
/deep/ .el-progress--circle .el-progress__text {
  font-size: 14px !important;
  font-weight: 600;
}
.tabBox{
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}
.tabBox span{
  padding: 10px 20px;
  display: inline-block;
  cursor: pointer;
}
.tabBox span.cur{ 
  background: #e3b85a;
  color: #ffff;
  border-bottom: 2px solid #e3b85a;

}
.card_wallet2{
  display: flex;
  box-shadow: 0 2px 0.0625rem 0 rgba(0,0,0,.1);
  border-radius: 10px;
  background: #fff;
  padding: 30px;
 
  
}
</style>
 
 